<template>
  <view class="app-container">
    <u-navbar placeholder fixed title="同城配送" left-icon=""></u-navbar>
    <view class="flex-1" style="overflow-y: auto">
      <view v-if="userStore.isRider" class="p-20">
        <template v-if="orderStore.list.length">
          <view v-for="(order, index) in orderStore.list" :key="index" class="mb-20">
            <my-order-item
              :price="order.plan_commission_amount"
              :name="`${order.items[0].name}/${order.items[0].quantity}${order.items[0].product_uom}`"
              :send-address="order.shop_company_location.address"
              :send-name="order.shop_company_location.name"
              :send-location="order.receiver_location"
              :gather-address="order.receiver_location.address"
              :gather-name="order.receiver_location.name"
              :gather-location="order.shop_company_location"
            >
              <template #actions>
                <view style="width: 200rpx">
                  <u-button shape="circle" type="primary" @tap="handleTakeOrder(order.id)">接单</u-button>
                </view>
              </template>
            </my-order-item>
          </view>
        </template>
        <template v-else>
          <u-empty text="暂无数据"></u-empty>
        </template>
      </view>
      <view v-else class="p-40">
        <u-empty type="permission" text="请申请成为骑手后接单">
          <u-gap height="10"></u-gap>
          <u-button type="success" @tap="handleToApply">申请成为骑手</u-button>
          <u-gap height="10"></u-gap>
          <u-button type="warning" @tap="handleToApplyRecord">查看申请</u-button>
        </u-empty>
      </view>
    </view>
    <!-- s -->
  </view>
</template>

<script setup>
  import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
  import { useOrderStore } from "@/store/order.js";
  import { useUserStore } from "@/store/user";

  const userStore = useUserStore();

  const orderStore = useOrderStore();

  /**
   * 导航到申请成为骑手的页面
   */
  function handleToApply() {
    // 使用 uni.navigateTo API 跳转到申请页面
    uni.navigateTo({
      url: "/pages/apply/apply",
    });
  }

  /**
   * 导航到查看申请记录的页面
   */
  function handleToApplyRecord() {
    // 使用 uni.navigateTo API 跳转到申请记录页面
    uni.navigateTo({
      url: "/pages/apply-record/apply-record",
    });
  }

  /**
   * 获取订单列表
   * @async
   */
  async function getList() {
    // 获取当前位置
    const result = await uni.getLocation();
    if (result) {
      // 使用订单仓库的 fetchOrderList 方法获取订单列表
      await orderStore.fetchOrderList({
        longitude: result.longitude,
        latitude: result.latitude,
      });
    }
  }

  /**
   * 处理接单操作
   * @async
   * @param {number} id - 订单ID
   */
  async function handleTakeOrder(id) {
    // 使用订单仓库的 fetchTakeOrder 方法接单
    const success = await orderStore.fetchTakeOrder({ id });
    if (success) {
      // 接单成功后刷新订单列表
      await getList();
    }
  }

  onShow(async () => {
    if (userStore.isRider) {
      await getList();
    }
  });

  onPullDownRefresh(async () => {
    if (userStore.isRider) {
      await getList();
      uni.$u.toast("刷新成功");
    }
    uni.stopPullDownRefresh();
  });
</script>

<style lang="scss" scoped></style>
